<template>
	<el-row :gutter="40">
		<el-col v-if="form.id < 0">
			<el-empty description="请选择左侧菜单后操作" :image-size="100"></el-empty>
		</el-col>
		<template v-else>
			<el-col :lg="24">
				<h2>{{form.name || "新增"}}</h2>
				<el-form :model="form" :rules="rules" ref="dialogForm" label-width="120px" label-position="left">
					<el-form-item label="显示名称" prop="name">
						<el-input v-model="form.name" clearable placeholder="菜单显示名字"></el-input>
					</el-form-item>
					<el-form-item label="上级菜单" prop="parent_id">
						<el-cascader v-model="form.parent_id" :options="menuOptions" :props="menuProps" :show-all-levels="false"
									 placeholder="顶级菜单" clearable></el-cascader>
					</el-form-item>
					<el-form-item label="类型" prop="type">
						<el-radio-group v-model="form.type">
							<el-radio-button :label="0">目录</el-radio-button>
							<el-radio-button :label="1">菜单</el-radio-button>
							<el-radio-button :label="2">按钮</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="权限标识" prop="perms" v-if="form.type === 2">
						<sc-form-table v-model="form.perms" :addTemplate="apiListAddTemplate" placeholder="暂无数据">
							<el-table-column prop="code" label="标识" width="350">
								<template #default="scope">
									<el-input v-model="scope.row.text" placeholder="请输入内容"></el-input>
								</template>
							</el-table-column>
						</sc-form-table>
					</el-form-item>
					<el-form-item label="菜单图标" prop="icon" v-if="form.type !== 2">
						<sc-icon-select v-model="form.icon" clearable></sc-icon-select>
					</el-form-item>
					<el-form-item label="路由地址" prop="router" v-if="form.type === 1">
						<el-input v-model="form.router" clearable placeholder=""></el-input>
					</el-form-item>
					<el-form-item label="排序" v-if="form.type !== 2">
						<el-input-number
							v-model="form.sort"
							:min="0"
							:max="999999"
							controls-position="right"
						/>
					</el-form-item>
					<el-form-item label="视图文件路径" prop="view_path" v-if="form.type === 1">
						<el-input v-model="form.view_path" clearable placeholder="">
							<template #prepend>views/</template>
						</el-input>
<!--						<div class="el-form-item-msg">如父节点、链接或Iframe等没有视图的菜单不需要填写</div>-->
					</el-form-item>
					<el-form-item label="是否显示" prop="is_show" v-if="form.type !== 2">
						<el-checkbox v-model="form.is_show" :true-label="1" :false-label="0">显示</el-checkbox>
						<div class="el-form-item-msg">菜单不显示在导航中，但用户依然可以访问，例如详情页</div>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="save" :loading="loading">保 存</el-button>
					</el-form-item>
				</el-form>

			</el-col>
		</template>
	</el-row>

</template>

<script>
	import scIconSelect from '@/components/scIconSelect'

	export default {
		components: {
			scIconSelect
		},
		props: {
			menu: { type: Object, default: () => {} },
		},
		data(){
			return {
				form: {
					id: -1,
					parent_id: "",
					name: "",
					router: "",
					view_path: "",
					perms: [],
					icon: "",
					is_show: 1,
					sort: 0,
					type: 0,
				},
				menuOptions: [],
				menuProps: {
					value: 'id',
					label: 'name',
					checkStrictly: true
				},
				rules: [],
				apiListAddTemplate: {
					text: ""
				},
				loading: false
			}
		},
		watch: {
			menu: {
				handler(){
					this.menuOptions = this.treeToMap(this.menu)
				},
				deep: true
			}
		},
		mounted() {

		},
		methods: {
			//简单化菜单
			treeToMap(tree){
				const map = []
				tree.forEach(item => {
					var obj = {
						id: item.id,
						parent_id: item.parent_id,
						name: item.name,
						children: item.children&&item.children.length>0 ? this.treeToMap(item.children) : null
					}
					map.push(obj)
				})
				return map
			},
			//保存
			async save(){
				const that = this
				this.loading = true
				let submitData = Object.assign({}, this.form);
				if (submitData.type !== 1) {
					submitData.router = '';
				}
				if (submitData.type === 2) {
					submitData.perms = submitData.perms.map(e => e.text).join(',')
				}
				else {
					submitData.perms = '';
				}
				delete submitData.children;
				setTimeout(function () {
					that.loading = false
				},3000)
				let res
				if (this.form.id === 0) {
					res = await this.$API.gdshop.menu.add(submitData);
				}
				else {
					res = await this.$API.gdshop.menu.update(submitData);
				}
				that.loading = false
				if(res.code === 0){
					this.$message.success("保存成功")
				}else{
					this.$message.warning(res.message)
				}
			},
			//表单注入数据
			setData(data, pid){
				console.log(data)
				this.form = data
				if (pid) {
					this.form.parent_id = pid
				}
			}
		}
	}
</script>

<style scoped>
	h2 {font-size: 17px;color: #3c4a54;padding:0 0 30px 0;}
	.apilist {border-left: 1px solid #eee;}

	[data-theme="dark"] h2 {color: #fff;}
	[data-theme="dark"] .apilist {border-color: #434343;}
</style>
